<!DOCTYPE html>
<html>
<head>
	<title>tanchishe</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		#game{
			width:500px;
			height:500px;
			margin:50px auto;
			border:2px solid #333;
			position: relative;
		}
		#game span{
			display:block;	
			width:10px;
			height:10px;
			background-color:blue;
			position:absolute;
		}
		#food{
			position:absolute;
			left:0;
			top:0;
			width:10px;
			height:10px;
			background-color:orange;
			border-radius: 50%;
		}
		#status{
			width:200px;
			padding:20px 10px;
			border:1px solid #e3e3e3;
			position:absolute;
			left:100px;
		}
		#status li{
			line-height:32px;
			list-style:none;
		}
		#score{
			color:#f00;
			font-family:"Arial";
			font-size:24px;
		}

	</style>
</head>
<body>
	<ul id="status">
		<li>score : <span id="score">0</span></li>
	</ul>
	<div id="game">
		<div id="food"></div>
	</div>
<script type="text/javascript">

	//  蛇
	var snake = {
		length:5,// 蛇身的长度
		width:10,// 蛇的宽度
		body:[],// 存放snake的Node节点
		init:function(){
			// 初始化一条蛇
			for( i = 0; i < snake.length; i++){
				// 生成一节蛇身体
				var span = document.createElement("span")
				span.style.top = 0 + "px" ;
				span.style.left = snake.width*i + "px";
				// 将新生成的蛇身加入到蛇身的数组里
				snake.body.push(span) 
				// 将生成的蛇身加入到游戏里面去
				game.node.appendChild(span)
			}
		},
		// 移动蛇
		move:function(){
			var tail = snake.body[0];// 蛇尾的位置
			var head = snake.body[snake.body.length-1]// 蛇头的位置
			// 向右移动
			if(game.direction == "right"){
				tail.style.left = parseInt(head.style.left) + snake.width + "px"; 
				tail.style.top = head.style.top; 
			}
			// 向下移动
			if(game.direction == "dottom"){
				tail.style.left = head.style.left;
				tail.style.top = parseInt(head.style.top) + snake.width + "px";
			}
			// 向左移动
			if(game.direction == "left"){
				tail.style.left = parseInt(head.style.left) - snake.width + "px";
				tail.style.top = head.style.top; 
			}
			// 向上移动
			if(game.direction == "top"){
				tail.style.left = head.style.left;
				tail.style.top = parseInt(head.style.top) - snake.width + "px";
			}
			// 调整蛇身体数组的顺序
			var order = snake.body[0]
			snake.body.shift()
			snake.body.push(order)

	
			// 当前移动后的蛇头
			var Head = snake.body[snake.body.length - 1];
			// 死亡判断
			if(parseInt(Head.style.left) >= 500 || parseInt(Head.style.left) < 0 || parseInt(Head.style.top) < 0 || parseInt(Head.style.top) >= 500){
					game.dead();
				}
			// 得分判断
			if(parseInt(Head.style.left) === food.pointx || parseInt(Head.style.top) === food.pointy ){
					game.Scorepoints();
				}

			},
		// 增加身体
		add:function(){
			var span = document.createElement("span");
				// 把当前蛇尾的坐标给到新增加的身体上
				span.style.left = snake.body[0].style.left;
				span.style.top = snake.body[0].style.top;
				// 将新生成的身体插入到数组的最前面
				snake.body.unshift(span);
				// 更新游戏界面
				game.node.appendChild(span);
		}

		
	}
	//游戏
	var game ={
		node:document.getElementById('game'),// 游戏页面的Node节点
		direction:"right",// 当前游戏中蛇移动的方向
		width:500,// 游戏宽度
		score:0,// 得分
		// 开始游戏
		start:function(){			
			// 初始化蛇
			snake.init();
			// 移动蛇
			play = setInterval(function(){
				snake.move()
			},60)
			// 随机生成食物
			food.producefood();
		},
		// 死亡
		dead:function(){
			clearInterval(play)
			alert("Game over，小辣鸡")
		},
		// 获得分数
		Scorepoints:function(){
			//新生成一个食物
			food.producefood()
			//增加一节身体
			snake.add()
			game.score = game.score + 10
		},
		// 更新分数
		Updatescore:function(){
			// 游戏界面上的Html里边的分数等于游戏里边的分数
			game.score = game.scorenode.innerHTML
		},
	}
	// 食物
	var food = {
		node:document.getElementById('food'),
		pointx:0,
		pointy:0,
		producefood:function(){
		 	// 0-490之间10的整数倍
			food.pointx = Math.round(Math.random()*49)*snake.width;
			food.pointy = Math.round(Math.random()*49)*snake.width;
			// 游戏中食物的坐标值
			food.node.style.left = food.pointx + "px";
			food.node.style.top = food.pointy + "px";
		}
	}	
		

	game.start();





	// 键盘操控蛇的移动方向
	window.onkeydown = function(e){
		if(e.keyCode === 37 && game.direction!== "right"){
			game.direction = "left";
		}
		if(e.keyCode === 38 && game.direction!== "bottom"){
			game.direction = "top";
		}
		if(e.keyCode === 39 && game.direction!== "left"){
			game.direction = "right";
		}
		if(e.keyCode === 40 && game.direction!== "top"){
			game.direction = "bottom";
		}
	}
	

</script>
</body>
</html>

	









		
	


